<template>
  <div class="admin-container">
    <h1>用户管理</h1>

    <!-- 搜索框区域：保持两个搜索框不变 -->
    <div class="search-container" style="margin-bottom: 20px; display: flex; gap: 10px; align-items: center;">
      <el-input
        v-model="searchAccount"  
        placeholder="请输入账号关键词搜索" 
        style="width: 250px;"  
        clearable 
        @keyup.enter="handleSearch"  
      />
      <el-input
        v-model="searchTel"  
        placeholder="请输入电话关键词搜索" 
        style="width: 250px;"  
        clearable 
        @keyup.enter="handleSearch"  
      />
      <el-button type="primary" @click="handleSearch">
        搜索
      </el-button>
      <el-button @click="handleReset">
        重置
      </el-button>
    </div>

    <!-- 用户表格：保持不变 -->
    <el-table 
      :data="usersList"  
      style="width: 100%; margin: 20px auto; border: 1px solid #eee;"
      border
      stripe
      :loading="tableLoading" 
    >
      <el-table-column prop="uid" label="用户id" width="160" align="center" />
      <el-table-column prop="uaccount" label="用户账号" width="300" align="center" />
      <el-table-column prop="utel" label="用户电话" width="300" align="center" />
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click="showUserDetail(scope.row)"
            style="margin-right: 8px;"
          >
            查看详情
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            @click="handleDelete(scope.row.uid)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能：保持不变（修复逻辑在脚本中） -->
    <div style="text-align: center; margin: 20px 0;">
      <el-pagination
        :page-size="params.pageSize"
        :total="params.recordCount"
        v-model:current-page="params.pageNum"
        @current-change="queryUsers"
        layout="total,prev,pager,next"
        :disabled="tableLoading"
      />
    </div>

    <!-- 用户详情弹窗：保持不变 -->
    <el-dialog 
      title="用户详情" 
      v-model="detailVisible" 
      width="50%"
      :close-on-click-modal="false"
    >
      <el-descriptions column="1" border>
        <el-descriptions-item label="用户ID">{{ currentUser.uid || '-' }}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{ currentUser.uaccount || '-' }}</el-descriptions-item>
        <el-descriptions-item label="用户电话">{{ currentUser.utel || '-' }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ formatTime(currentUser.uregtime) }}</el-descriptions-item>
        <el-descriptions-item label="用户状态">{{ currentUser.status === 1 ? '正常' : '禁用' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 删除确认弹窗：保持不变 -->
    <el-dialog 
      title="删除确认" 
      v-model="deleteVisible" 
      width="30%"
      :close-on-click-modal="false"
    >
      <div>确定要删除 ID 为 <span style="color: #f56c6c; font-weight: 500;">{{ deleteUid }}</span> 的用户吗？删除后不可恢复！</div>
      <template #footer>
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete" :loading="deleteLoading">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';

// 导入正确的接口（queryPage：无搜索分页，selectByAccount：带搜索分页）
import { deleteById, queryPage, selectByAccount } from '@/api/Users';

// 1. 搜索参数：保持账号/电话独立
const searchAccount = ref("");
const searchTel = ref("");

// 2. 分页参数：保持不变（关键：total由接口返回的recordCount赋值）
const params = ref({
  pageNum: 1,    // 当前页码（与分页组件双向绑定）
  pageSize: 5,   // 每页条数
  recordCount: 0 // 总条数（由接口返回，控制分页组件总页数）
});

// 3. 页面状态：保持不变
const usersList = ref([]);
const detailVisible = ref(false);
const deleteVisible = ref(false);
const currentUser = ref({});
const deleteUid = ref('');
const tableLoading = ref(false);
const deleteLoading = ref(false);

// 4. 时间格式化：保持不变
const formatTime = (isoTime) => {
  if (!isoTime) return '暂无数据';
  return dayjs(isoTime).format('YYYY-MM-DD HH:mm:ss');
};

// 5. 核心修复：区分“无搜索”和“有搜索”的分页逻辑
function queryUsers() {
  tableLoading.value = true;
  
  // 处理搜索关键词（去除空格，避免空字符串干扰）
  const account = searchAccount.value.trim();
  const tel = searchTel.value.trim();
  const hasSearch = account || tel; // 判断是否有搜索条件

  // 关键逻辑：根据是否有搜索条件，调用不同接口
  const request = hasSearch 
    ? // 有搜索条件：调用带条件的分页接口（传页码、条数、账号、电话）
      selectByAccount(params.value.pageNum, params.value.pageSize, account, tel)
    : // 无搜索条件：调用全量分页接口（只传页码、条数）
      queryPage(params.value.pageNum, params.value.pageSize);

  // 统一处理接口响应（更新表格数据和总条数，保证分页组件生效）
  request
    .then(data => {
      usersList.value = data.list || []; // 表格数据
      params.value.recordCount = data.pager?.recordCount || 0; // 总条数（分页组件依赖这个值）
    })
    .catch(err => {
      console.error('数据加载失败：', err);
      ElMessage.error('加载失败，请重试');
      usersList.value = [];
      params.value.recordCount = 0; // 错误时重置总条数，避免分页组件异常
    })
    .finally(() => {
      tableLoading.value = false; // 关闭加载状态
    });
}

// 6. 搜索按钮：重置到第1页再查询（保持不变）
function handleSearch() {
  params.value.pageNum = 1; // 搜索时从第1页开始
  queryUsers();
}

// 7. 重置按钮：清空搜索框+重置到第1页（保持不变）
function handleReset() {
  searchAccount.value = "";
  searchTel.value = "";
  params.value.pageNum = 1;
  queryUsers();
}

// 8. 查看详情：保持不变
function showUserDetail(user) {
  currentUser.value = JSON.parse(JSON.stringify(user));
  detailVisible.value = true;
}

// 9. 删除功能：保持不变
function handleDelete(uid) {
  if (!uid || typeof uid !== 'number') {
    ElMessage.warning('无效用户ID');
    return;
  }
  deleteUid.value = uid;
  deleteVisible.value = true;
}

function confirmDelete() {
  deleteLoading.value = true;
  deleteById(deleteUid.value)
    .then(() => {
      ElMessage.success(`用户ID: ${deleteUid.value} 删除成功`);
      deleteVisible.value = false;
      queryUsers(); // 删除后重新查询当前页
    })
    .catch(err => {
      console.error('删除失败：', err);
      ElMessage.error('删除失败，请重试');
    })
    .finally(() => {
      deleteLoading.value = false;
    });
}

// 初始化查询（页面加载时执行，无搜索条件，调用queryPage分页）
queryUsers();
</script>





<style scoped>
/* 容器核心样式：控制宽度+居中+背景 */
.admin-container {
  max-width: 1400px; /* 限制最大宽度，避免大屏过宽 */
  width: 100%; /* 响应式宽度，小屏自适应 */
  margin: 0 auto;
  padding: 24px;
  background-color: #fff; /* 改为白色背景，更符合现代后台风格 */
  border-radius: 12px; /* 圆角增强质感 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); /* 轻微阴影，提升层次感 */
  font-family: "Inter", "Microsoft YaHei", sans-serif; /* 适配中英文的现代字体 */
}

/* 标题样式：居中+权重调整 */
.admin-container h1 {
  text-align: center;
  font-size: 24px;
  font-weight: 600; /* 中等加粗，避免过粗 */
  color: #1f2937; /* 深灰，比纯黑更柔和 */
  margin: 0 0 28px; /* 只保留底部间距，精简冗余 */
}

/* 表格容器：控制宽度+居中 */
.el-table {
  width: 100% !important; /* 覆盖 Element 默认，确保占满容器 */
  margin: 0 auto 24px !important; /* 底部留空，与分页分隔 */
  border-radius: 8px; /* 表格圆角（需配合 Element 配置） */
  overflow: hidden; /* 防止圆角被内容截断 */
}

/* 表格表头样式：加深背景+调整字体 */
.el-table th {
  background-color: #f9fafb !important;
  font-weight: 500;
  color: #4b5563;
  font-size: 14px;
}

/* 表格行 hover 效果：柔和高亮 */
.el-table__row:hover > td {
  background-color: #f3f4f6 !important;
}

/* 分页容器：居中+间距调整 */
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  font-size: 13px;
}

/* 弹窗标题样式：统一权重和颜色 */
.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* 详情弹窗描述项：调整间距和对齐 */
.el-descriptions {
  margin-top: 16px;
}
.el-descriptions-item {
  font-size: 14px;
  color: #374151;
  padding: 12px 16px !important; /* 增加内边距，提升可读性 */
}
.el-descriptions-item__label {
  font-weight: 500;
  color: #4b5563;
}

/* 按钮统一调整：缩小内边距，统一圆角 */
.el-button--small {
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}
/* 操作列按钮间距：避免拥挤 */
.el-table-column--operation .el-button {
  margin-right: 8px;
}
.el-table-column--operation .el-button:last-child {
  margin-right: 0;
}

/* 消息提示框：调整位置，避免遮挡 */
.el-message {
  top: 60px !important;
}
.search-container {
  margin: 20px 0;
  display: flex;
  align-items: center;
}
</style>



